<script setup lang="ts">
import { PropType, reactive } from 'vue'
import type { TableData } from '@/api/table/types'
import { Descriptions } from '@/components/Descriptions'
import { useI18n } from '@/hooks/web/useI18n'
import { ElTag, ElRow, ElCol, ElTable, ElTableColumn } from 'element-plus'
import { DescriptionsSchema } from '@/types/descriptions'

const { t } = useI18n()

defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  },
  detailSchema: {
    type: Array as PropType<DescriptionsSchema[]>,
    default: () => []
  },
  tableData: {
    type: Array as any,
    default: () => []
  }
})
</script>

<template>
  <div class="detailW">
    <div class="flexW">
      <div class="detailItem" v-for="(item, index) in detailSchema" :key="index">
        <div class="fxy--center">
          <span class="label">{{ item.label }}：</span>
          <span class="value" v-if="item.field != 'goods_type.name'">{{
            currentRow && currentRow[item.field] ? currentRow[item.field] : '/'
          }}</span>
          <span class="value" v-else>{{
            currentRow && currentRow['goods_type'] ? currentRow['goods_type'].name : '/'
          }}</span>
        </div>
      </div>
    </div>
    <div class="tableW">
      <div class="t_title">货品数据：</div>
      <ElTable :data="tableData" style="width: 100%">
        <ElTableColumn prop="gname" label="名称" width="180" />
        <ElTableColumn prop="total" label="总数量" width="180" />
        <!-- <ElTableColumn prop="goods_id" label="货物种类" width="180" /> -->
        <ElTableColumn prop="worth" label="采购单价" width="180" />
        <ElTableColumn prop="prce" label="销售单价" width="180" />
        <ElTableColumn prop="quantity" label="装箱数" width="180" />
        <ElTableColumn prop="room" label="房间号" width="180" />
        <ElTableColumn prop="colour" label="颜色" width="180" />
        <ElTableColumn prop="length" label="长" width="180" />
        <ElTableColumn prop="width" label="宽" width="180" />
        <ElTableColumn prop="high" label="高" width="180" />
        <ElTableColumn prop="weight" label="重量" width="180" />
        <ElTableColumn prop="remark" label="备注" width="180" />
      </ElTable>
    </div>
  </div>
</template>
<style lang="less" scoped>
.fxy--center {
  display: flex;
  // align-items: center;
  align-items: flex-start;
  justify-content: space-between;
}
.flexW {
  display: flex;
  flex-wrap: wrap;
}
.detailItem {
  flex: 0 0 calc((100% - 100px) / 3);
  margin-left: 50px;
  margin-bottom: 30px;
  &:nth-child(3n + 1) {
    margin-left: 0;
  }
}
.label,
.t_title {
  font-size: 14px;
  color: #999;
  font-weight: bold;
  white-space: nowrap;
}
.value {
  color: #333;
}
</style>
